<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="css/handerAndFooter.css">
    <style>
        .brand-content{
            width: 52vw;
            margin: 5vw auto;
        }
        .brand-title{
            color: rgb(88, 88, 88);
            font-size: 2rem;
            letter-spacing: 1px;
            margin-bottom: 2vw;
        }
        .brand-block{
            display: flex;
            margin: 8vw 0 7vw;
        }
        .brand-block-left{
            width: 50%;

        }
        .brand-block-right{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-left: 10%;
            box-sizing: border-box;
        }
        .brand-block-time{
            color: rgb(88, 88, 88);
            font-size: 1.8rem;
        }
        .brand-block-content>div{
            margin-top: 1.5vw;
        }
        .brand-block>div{
            width: 50%;
            box-sizing: border-box;
        }
        .block-flex{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .block-font{
            color: #333;
            font-size: 12px;
            letter-spacing: 1px;
            line-height: 24px;
            word-wrap: break-word;
            word-break: break-all;
        }
        .animImg{
            position: relative;
            top: 3rem;
            transition: all 1s linear;
            opacity: 0;
            overflow: hidden;
        }
        .animImg img{
            transition: all .5s linear;
        }
        .animImg img:hover{
            transform: scale(1.05);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<el-header>
    <div id="header-navbar"> 地平线8号 尽管出发 创造不凡</div>
</el-header>
<div class="header222" style="overflow:hidden;margin: 0 auto; padding-top:15px;width: 80%">
    <div style=" width:20%;float: left;overflow:hidden; padding-top: 30px">
        <img src="./images/logo.png" alt=""
             style="float: left;margin-left:40px;padding-bottom:15px;width: 120px">
    </div>
    <div id="app" style="float: left ;
                     vertical-align: bottom;
                      width: 50%;
                     padding-left: 20px">
        <el-menu :default-active="activeIndex"
                 text-color="#000"
                 mode="horizontal"
                 @select="handleSelect"
                 active-text-color="#ffd04b">

            <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="1">商城</el-menu-item>
            <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="2">周边</el-menu-item>
            <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="3">MEDIA</el-menu-item>
            <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="7">品牌</el-menu-item>
            <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="5">服务</el-menu-item>
            <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="6">会员中心</el-menu-item>
            <!--        <el-menu-item index="3" disabled>消息中心</el-menu-item>-->
        </el-menu>
        <div class="line" style=""></div>
    </div>

</div>
<div class="brand-content">
    <div class="brand-title">LEVEL8 品牌故事</div>
    <div class="brand-banner">
        <img src="./images/pinpai1.jpg">
    </div>
    <!-- block -->
    <div class="brand-block">
        <div class="brand-block-left animImg" style="top: 0px; opacity: 1;">
            <img src="./images/pinpai-2.png">
        </div>
        <div class="brand-block-right">
            <div class="brand-block-time">SINCE 2008</div>
            <div class="block-font">
                <div>LEVEL8 在美国硅谷浓厚的创业氛围中诞生，由设计师 OtiShor 一手打造。如同身边那些热情的创业者们，OtiShor 在产品上也倾注了自己充沛的灵感与才华。</div>
                <div>LEVEL8风靡硅谷的第一款产品，是具有230个减震点专利的Atlas背包，专为苹果MacBook而设计。OtiShor在出行装备上为电脑提供的极致保护，希望人们无需顾虑，尽管出发去创造自己的人生。</div>
                <div>很快，LEVEL8的一系列出行装备，开始和这些聪明的年轻人一起，从硅谷走向世界各地，踏上非凡的旅程。</div>
            </div>
        </div>
    </div>
    <!--  -->
    <div style="font-size: 1.6rem;font-weight: 600;">
        <div>在中国，</div>
        <div style="margin:1vw 0 2.2vw">LEVEL8 与两个特别的人一起续写了出发的故事。</div>
        <div style="border-top: 1px dashed #000;"></div>
    </div>
    <!-- block -->
    <div class="brand-block" style="margin-top: 2vw;">
        <div class="block-flex" style="padding: 6vw 4vw 5vw 0;">
            <div class="block-font">
                <div style="width: 20%;"><img src="./images/p-6.png"></div>
                <div style="margin-top: 15%;">◎第一位是罗永浩，从一名优秀的英语老师到锤子科技的CEO，他是“理想主义”的代名词。</div>
                <div style="margin-top: 8%;">2018年，LEVEL8 designed by smartisan系列产品一经推出，就受到中国一群品味独到、目光犀利的年轻创业家们的喜爱，也让“地平线8号”这个名字迅速被大众熟知。凭借卓越的外观与功能表现，该系列产品一举斩获德国红点设计大奖。</div>
            </div>
            <div style="width: 40%;">
                <img src="./images/p-7.png">
            </div>
        </div>
        <!-- 右侧图片 -->
        <div style="padding-left: 6%; top: 0px; opacity: 1;" class="animImg">
            <img src="./images/p-3.jpg">
        </div>
    </div>
    <!-- block -->
    <div class="brand-block">
        <div class="animImg" style="top: 0px; opacity: 1;">
            <img src="./images/p-4.png">
        </div>
        <div class="block-flex" style="padding-top: 10%;padding-left:10%;align-items: flex-end;">
            <div style="width: 25%;"><img src="./images/p-9.png"></div>
            <div class="block-font">
                <div>◎第二位则是才华横溢的音乐天王——周杰伦与他的潮牌PHANTACi。 </div>
                <div style="margin-top: 12px;">大胆的跨界联合，让LEVEL8再次创造出一系列具有强烈辨识度的旅行箱，通过RPET材料的环保内核，赋予了出行更丰富的个性与内涵。这也是周杰伦首次为其演艺圈好友与演唱会团队打造一款旅行箱。 </div>
            </div>
        </div>
    </div>
    <!-- block -->
    <div class="brand-block">

        <div class="block-flex" style="padding-right:10%;">
            <div class="block-font">
                <div>从硅谷那些最聪明的创业者开始，到中国充满理想与才华的年轻人，远至欧洲、甚至地球那些极端的风景。LEVEL8 的足迹遍布世界各地，始终为年轻的伙伴创造一个个“尽管出发”的瞬间，做他们旅途上最可靠的陪伴者和支持者。  </div>
                <div>与此同时，LEVEL8 不断融合更多顶级的设计团队和新锐力量，致力于成为全球高频出行人士的第一选择。  </div>
                <div style="margin-top: 30px;">“8”是最对称的数字，横向的“∞”则表示无限，象征着对未来的探寻永无止境。这是每一个人创造精彩的故事，也是我们一直在继续的全球旅程。</div>
            </div>
        </div>
        <div class="animImg" style="top: 0px; opacity: 1;">
            <img src="./images/p-5.png">
        </div>
    </div>
</div>

<el-footer ><div id="footer" style="">
    <div id="footer-content">
        <div id="footer-content-left">
            <div id="footer-search" style="">
                <input placeholder="搜索关键词" >
                <div >
                    <img  src="./images/face-right-white.png">
                </div>
            </div>
            <div id="footer-follow">
                <span >FOLLOW US</span>
                <a target="_blank" href=" https://weibo.com/level8official"><img src="./images/footer_icon_1.png"></a>
                <!-- <a target="_blank" href=""><img src="/static/images/footer_icon_2.png"/></a> -->
                <a target="_blank" href="https://www.instagram.com/level8_official/"><img
                        src="./images/footer_icon_3.png"></a>
                <a target="_blank" href="https://www.facebook.com/pg/Level8Group/shopify"><img
                        src="./images/footer_icon_4.png"></a>
                <a target="_blank"
                   href="https://space.bilibili.com/349904854?from=search&amp;seid=16496169767152971469&amp;spm_id_from=333.337.0.0"><img
                        src="./images/footer_icon_5.png"></a>
                <a target="_blank"
                   href="https://www.xiaohongshu.com/vipUser/profile/5c982e85000000001000bbd4?xhsshare=CopyLink&amp;appuid=5c0544836b58b714620b8753&amp;apptime=1636529051"><img
                        src="./images/footer_icon_6.png"></a>
            </div>
        </div>
        <div id="footer-content-right">
            <div class="footer-code-item" style="border-right: 1px dashed #000;">
                <div class="footer-code">
                    <img  src="./images/footer_code1.png">
                </div>
                <div>绑定产品</div>
            </div>
            <div class="footer-code-item " style="border-right: 1px dashed #000;">
                <div class="footer-code">
                    <img src="./images/footer_code2.png">
                </div>
                <div>关注公众号</div>
            </div>
            <div class="footer-code-item paddingR0">
                <div class="footer-code">
                    <img  src="./images/footer_code3.png">
                </div>
                <div>关注抖音</div>
            </div>
        </div>
    </div>
    <div id="footer-bottom">
        <div id="footer-bottom-right">
            <div style="margin-right: 20px;">© Copyright Level 8 2017</div>
            <div>level8@level8cases.com</div>
        </div>
    </div>
    <div class="gmt-footer-bottom">
        <!-- class="container" -->
        <div>版权所有 ©2021 &nbsp;&nbsp;公司名：厦门远行客智能科技有限公司
            <a style="margin-left:10px;color: #000;" href="http://beian.miit.gov.cn">闽ICP备20000451号</a></div>
    </div>
</div></el-footer>
</body>
</html>

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: function () {
            return {visible: false,
                activeIndex: '1',
                activeIndex2: '1',
                input: ''}
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }

    })
</script>